<template>

    <swiper ref="swiper"
            direction="horizontal"
            width="100%"
            height="210"
            pager-color="#fff"
            pager-bg-color="#e5e4e3"
            hide-pager="false"

    >
        <!--<swiper-item>-->
            <!--<a :href="list0.url">-->
                <!--<img :src="'http://dn-toursforfun.qbox.me/images/'+ list0.picture + '?imageView2/1/w/720/h/404/q/90/format/jpg'">-->
            <!--</a>-->
        <!--</swiper-item>-->

        <swiper-item>
            <router-link to="/imagelist/1">
                <img :src="'http://dn-toursforfun.qbox.me/images/'+ list[0].picture +'?imageView2/1/w/720/h/404/q/90/format/jpg'">
            </router-link>
        </swiper-item>

        <swiper-item>
            <router-link to="/imagelist/2">
                <img :src="'http://dn-toursforfun.qbox.me/images/'+ list[1].picture +'?imageView2/1/w/720/h/404/q/90/format/jpg'">
            </router-link>
        </swiper-item>

        <swiper-item>
            <router-link to="/imagelist/3">
                <img :src="'http://dn-toursforfun.qbox.me/images/'+ list[2].picture +'?imageView2/1/w/720/h/404/q/90/format/jpg'">
            </router-link>
        </swiper-item>

        <swiper-item>
            <router-link to="/imagelist/4">
                <img :src="'http://dn-toursforfun.qbox.me/images/'+ list[3].picture +'?imageView2/1/w/720/h/404/q/90/format/jpg'">
            </router-link>
        </swiper-item>

        <swiper-item>
            <router-link to="/imagelist/5">
                <img :src="'http://dn-toursforfun.qbox.me/images/'+ list[4].picture +'?imageView2/1/w/720/h/404/q/90/format/jpg'">
            </router-link>
        </swiper-item>

        <swiper-item>
            <router-link to="/imagelist/6">
                <img :src="'http://dn-toursforfun.qbox.me/images/'+ list[5].picture +'?imageView2/1/w/720/h/404/q/90/format/jpg'">
            </router-link>
        </swiper-item>

        <swiper-item>
            <router-link to="/imagelist/7">
                <img :src="'http://dn-toursforfun.qbox.me/images/'+ list[6].picture +'?imageView2/1/w/720/h/404/q/90/format/jpg'">
            </router-link>
        </swiper-item>

    </swiper>
</template>

<script>
    export default{
        props:['list0','list'],
        data(){
            return {

            }
        },
        methods:{

        },
        beforeCreate(){

        },
        mounted(){
//            var index=0
//            var $circle=$('.swiper-pagination .circle')
//            function play(){
//                $('.swiper-pagination .circle').css('background','#e5e4e3')
//                $('.swiper').stop().animate({"left":-$('.swiper-item img').width()*index + 'px'},1000)
//                $('.swiper-pagination .circle').eq(index).css('background','#fff')
//            }
//            setInterval(function(){
//                index++
//                if(index==7){
//                    $('.swiper').css({"left":0})
//                    index=0
//                }
//                play()
//            },4000)
        }
    }
</script>
<style>
    .swiper-pagination{
        position: relative;
        top:-30px;
    }
    .swiper{
        position: relative;
        left:0;
        height:210px;
    }
    .swiper-item{
        width:375px;
        background-image: url("../assets/image/lazy.png");
    }
    .swiper .swiper-item img{
        width:100%;
        height:100%;
    }
    .swiper-pagination .active{
        background: #fff;
    }
</style>